page-chat-detail {
    -webkit-user-select: auto;//控制网页内容选择范围,恢复选择功能
    .back{
        background: none;
        position: absolute;
        left: 0.5rem;
    }
    .back ion-icon{
        color: #fff;
        font-size: 2.4rem
    }
    .more{
        background: none;
        position: absolute;
        right: 0.5rem;;
        top: 0;
        color: #fff;
        font-size: 2.2rem;
        line-height: 2.6rem;
    }

    $userBackgroundColor: #387ef5;
    $toUserBackgroundColor: #fff;
    ion-footer {
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.11);
        background-color: #fff;
        height: 255px;
    }
    .line-breaker {
        white-space: pre-line;
        font-size: 1.2rem;
    }
    .input-wrap {
        padding: 0 5px;
        ion-input {
            position: static;
        }
        ion-col.col {
            padding: 0;
        }
        button {
            padding:0 0.2rem;
            height: 55px;
            font-size: 1.8em;
            margin: 0 auto;
            display: block;
            border-radius: 10px;
        }
        ion-icon{
            height: 26px;
            color: #757478;
        }
        .send{
            color: white;
            background: #009eff;
            font-size: 1.4rem;
            width: 100%;
            text-align: center;
            height: 35px;
            margin: 10px 0;
        }
        input {
            border: 1px solid #d9d8d8;
            border-radius: 10px;
            margin: 10px 0;
            width: 100%;
            padding:0 5px;
            height: 36px;
            line-height: 36px;
            font-size: 1.4rem;
            letter-spacing: 0.1rem;
        }
    }
    .message-wrap {
        padding: 0 10px;
        .message {
            position: relative;
            padding: 1rem 0 0 0;
            .user-img {
                position: absolute;
                border-radius: 45px;
                width: 45px;
                height: 45px;
                box-shadow: 0 0 2px rgba(0, 0, 0, 0.36);
                border: 0.2rem solid #b2e2ff;
            }
            .msg-detail {
                width: 100%;
                display: inline-block;
                margin-bottom: 1rem;
                p {
                    margin: 0;
                }
                .msg-info {
                    p {
                        font-size: .8em;
                        color: #888;
                    }
                }
                .msg-content {
                    position: relative;
                    margin-top: 5px;
                    border-radius: 5px;
                    padding: 8px;
                    border: 1px solid #ddd;
                    color: #fff;
                    width: auto;
                    span.triangle {
                        background-color: #fff;
                        border-radius: 2px;
                        height: 8px;
                        width: 8px;
                        top: 12px;
                        display: block;
                        border-style: solid;
                        border-color: #ddd;
                        border-width: 1px;
                        -webkit-transform: rotate(45deg);
                        transform: rotate(45deg);
                        position: absolute;
                    }
                }
            }
        }
        .message.left {
            .msg-content {
                background-color: $toUserBackgroundColor;
                float: left;
            }
            .msg-detail {
                padding-left: 55px;
                padding-right: 30px;
            }
            .user-img {
                left: 0;
            }
            .msg-content {
                color: #343434;
                span.triangle {
                border-top-width: 0;
                border-right-width: 0;
                left: -5px;
                }
            }
        }
        .message.right {
            .msg-detail {
                padding-right: 55px;
                padding-left: 30px;
                .msg-info {
                    text-align: right;
                }
            }
            .user-img {
                right: 0;
            }
            ion-spinner {
                position: absolute;
                right: 10px;
                top: 50px;
            }
            .msg-content {
                background-color: $userBackgroundColor;
                float: right;
                span.triangle {
                background-color: $userBackgroundColor;
                border-bottom-width: 0;
                border-left-width: 0;
                right: -5px;
                }
            }
        }
    }
}
